<template>
  <div v-if="visible" class="custom-modal">
    <div class="modal-overlay" @click="handleCancel"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h3>资产总览列表</h3>
        <button class="close-btn" @click="handleCancel">×</button>
      </div>
      <div class="modal-body">
        <table class="custom-table">
          <thead>
            <tr>
              <th>资产编号</th>
              <th>资产名称</th>
              <th>资产类型</th>
              <th>所属部门</th>
              <th>购置日期</th>
              <th>资产状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in dataList" :key="item.id">
              <td>{{ item.code }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.type }}</td>
              <td>{{ item.department }}</td>
              <td>{{ item.purchaseDate }}</td>
              <td>
                <span :class="['status', item.status]">
                  {{ item.status === 'normal' ? '正常' : '警告' }}
                </span>
              </td>
              <td>
                <button class="action-btn" @click="handleViewDetail(item)">查看详情</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button class="cancel-btn" @click="handleCancel">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      visible: false
    };
  },
  methods: {
    show() {
      this.visible = true;
      this.dataList = [
        {
          id: '1',
          code: 'ZC2023001',
          name: '办公大楼A座',
          type: '不动产',
          department: '行政部',
          purchaseDate: '2020-01-15',
          status: 'normal'
        },
        {
          id: '2',
          code: 'ZC2023002',
          name: '起重机设备',
          type: '机械设备',
          department: '工程部',
          purchaseDate: '2021-03-22',
          status: 'warning'
        },
        {
          id: '3',
          code: 'ZC2023003',
          name: '商务车',
          type: '交通工具',
          department: '综合部',
          purchaseDate: '2022-05-30',
          status: 'normal'
        }
      ];
    },
    handleCancel() {
      this.visible = false;
    },
    handleViewDetail(record) {
      this.$emit('view-detail', record);
    }
  }
};
</script>

<style scoped>
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.modal-content {
  position: relative;
  background: #0a1629;
  border: 1px solid #1f3a60;
  border-radius: 8px;
  width: 800px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  background: #142947;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #1f3a60;
}

.modal-header h3 {
  color: #e6edf3;
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  color: #8b949e;
  font-size: 20px;
  cursor: pointer;
}

.close-btn:hover {
  color: #fff;
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  color: #8b949e;
}

.custom-table th,
.custom-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #1f3a60;
}

.custom-table th {
  background: #142947;
  color: #c9d1d9;
}

.custom-table tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.status.normal {
  background: #4caf50;
  color: #fff;
}

.status.warning {
  background: #ff9800;
  color: #fff;
}

.action-btn {
  background: #165dff;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.action-btn:hover {
  background: #4080ff;
}

.modal-footer {
  background: #0a1629;
  padding: 16px;
  border-top: 1px solid #1f3a60;
  text-align: right;
}

.cancel-btn {
  background: #142947;
  color: #8b949e;
  border: 1px solid #1f3a60;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn:hover {
  background: #1e3a68;
  color: #fff;
}
</style>